<template>
  <div class="signInQRcode">
    <div class="container">
      <div class="left-QRcode">
        <div class="QRcode-box">
          <div id="QRcodeBox" ref="QRcodeBox">
            <div class="title-style">{{ title }}</div>
            <div>
              <div id="qrcode" class="qrcode-img"></div>
            </div>
            <div class="bottom-style">{{ orgName }}</div>
          </div>
        </div>
        <div class="download-btn">
          <el-button type="primary" @click="saveImage('QRcodeBox', '签到模板')">下载签到码模板</el-button>
        </div>
      </div>
      <div class="set-box">
        <div class="set-list">
          <span class="set-label">二维码引导文案：</span>
          <el-input v-model="title" class="item-style" />
        </div>
        <div class="set-list">
          <span class="set-label">机构名称：</span>
          <el-input v-model="orgName" class="item-style" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'

export default {
  data() {
    return {
      name: 'test',
      title: '微信扫一扫，签到消课',
      orgName: '教育'
    }
  },
  mounted() {
    this.qrcode()
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 130,
        height: 130,
        text: 'https://www.baidu.com', // 二维码地址
        colorDark: "#000",
        colorLight: "#fff",
      })
    },
    dataURLToBlob(dataurl) {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    /* 保存图片的方法（即按钮点击触发的方法）
      第一个参数为需要保存的div的id名
      第二个参数为保存图片的名称 */
    saveImage(divText, imgText) {
      const canvasID = this.$refs[divText]
      const that = this
      const a = document.createElement('a')
      html2canvas(canvasID).then(canvas => {
        const dom = document.body.appendChild(canvas)
        dom.style.display = 'none'
        a.style.display = 'none'
        document.body.removeChild(dom)
        const blob = that.dataURLToBlob(dom.toDataURL('image/png'))
        a.setAttribute('href', URL.createObjectURL(blob))
        // 这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute('download', imgText + '.png')
        document.body.appendChild(a)
        a.click()
        URL.revokeObjectURL(blob)
        document.body.removeChild(a)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.signInQRcode {
  padding: 20px;
  .container {
    display: flex;
    .left-QRcode {
      .QRcode-box {
        width: 300px;
        text-align: center;
        padding: 0 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px #767667;
        .title-style {
          padding: 20px 0;
          font-size: 18px;
          font-weight: 600;
        }
        .qrcode-img {
          display: flex;
          justify-content: center;
        }
        .bottom-style {
          padding: 20px 0;
          font-size: 18px;
          font-weight: 600;
        }
      }
      .download-btn {
        margin: 20px 0;
        text-align: center;
      }
    }

    .set-box {
      margin-left: 40px;
      .set-list {
        margin: 20px 0;
        .set-label {
          display: inline-block;
          width: 120px;
          text-align: right;
          color: #353535;
          font-size: 14px;
        }
        .item-style {
          width: 300px;
        }
      }
    }
  }
}
</style>
